// 跳转到首页
function getIndexPage() {
    $('#herder .herder_logo a').on('click', function () {
        location.href = '../pages/index.html'
    })
    $('#nav li[value=index]').on('click', function () {
        location.href = '../pages/index.html'
    })

}
getIndexPage()
//跳转到我的购物车
function toMycart() {
    $('#herder .myCart').on('click', function () {
        location.href = '../pages/carsList.html'
    })
}
toMycart()

let productID = localStorage.getItem("PRODUCTID")
console.log(productID)
// 获取商品信息
function getProductInformation() {
    $.ajax({
        type: 'get',
        url: `http://www.xiongmaoyouxuan.com/api/detail?id=${productID}&normal=1&sa=`,
        success: function (ProductInformation) {
            if (ProductInformation.code = 200) {
                getThisProduct(ProductInformation.data)
            }
        },
        error: function (err) {
            console.log(err)
        }
    })
}
getProductInformation()

// 渲染这个商品的信息
function getThisProduct(data) {
    let indexHtmlTxt = template('ProductInformation', {
        data
    })
    $('#main').html(indexHtmlTxt)

    let Glass1 = new GlassZoom()
    Glass1.setScale()
    Glass1.moveGlass()
    Glass1.onTabGlass()
    Glass1.addshopNum()
    Glass1.addshopList(data)

}

// 回到顶部按钮
function backTop() {
    $(document).on('scroll', function () {
        if ($(document).scrollTop() > 1400) {
            $('#backTopBtn').css(
                'display',
                'block'
            )
        } else {
            $('#backTopBtn').css(
                'display',
                'none'
            )
        }
        // console.log($(document).scrollTop())
    })
    // 点击时返回顶部
    $('#backTopBtn').on('click', function () {
        let height = $(document).scrollTop()
        let backTop = window.setInterval(function () {
            height = height - 50
            if (height <= 50) {
                $(document).scrollTop(0)
                window.clearInterval(backTop)
            }
            $(document).scrollTop(height)
        }, 5)
    })
}
backTop()


// 用面向对象的方法
class GlassZoom {
    // 获取公用的节点
    constructor(id) {
        this.root = document.querySelector('#main')
        // 获取遮罩
        this.mask = this.root.querySelector('.mask')
        // 商品大图
        this.showBox = this.root.querySelector('.pic')
        // 放大镜的盒子
        this.bgGlass = this.root.querySelector('.bigGlass')
        // 放大镜图片
        this.bgPic = this.root.querySelector('.bgPic')
        // 商品小图
        this.showList = this.root.querySelector('.picList')
        //添加购物车按钮
        this.addToShoppingCartBtnEle = this.root.querySelector('#addCart-btn')

    }
    /**
     * 计算背景图比例
     *   遮罩层mask            放大镜bigGlass
     *  ---------------   =   ------------------
     *   显示图片showbox        背景图bigPicBox
     * 
     *   背景图片bigpicbox = 放大镜bigGlass*显示图片showbox/遮罩层mask
     */
    setScale() {
        // 根据已知条件设置图片的尺寸
        this.bgPic.style.width = this.bgGlass.offsetWidth * this.showBox.offsetWidth / this.mask.offsetWidth + 'px'
        this.bgPic.style.height = this.bgGlass.offsetHeight * this.showBox.offsetHeight / this.mask.offsetHeight + 'px'
    }
    moveGlass() {
        // 移入显示遮罩
        this.showBox.onmouseover = () => {
            this.mask.style.display = 'block'
            this.bgGlass.style.display = 'block'
            this.setScale()
        }
        // 移出隐藏遮罩
        this.showBox.onmouseout = () => {
            this.mask.style.display = 'none'
            this.bgGlass.style.display = 'none'
        }
        //移动遮罩层
        this.showBox.onmousemove = (e) => {
            // 获取当前事件
            e = e || window.event
            let x = e.offsetX - this.mask.offsetWidth / 2
            let y = e.offsetY - this.mask.offsetHeight / 2
            // 边界检查
            if (x < 0) x = 0
            if (x > this.showBox.offsetWidth - this.mask.offsetWidth) {
                x = this.showBox.offsetWidth - this.mask.offsetWidth
            }
            if (y < 0) y = 0
            if (y > this.showBox.offsetHeight - this.mask.offsetHeight) {
                y = this.showBox.offsetHeight - this.mask.offsetHeight
            }
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'
            // this.bgPic.style.left = x * -2 + 'px'
            // this.bgPic.style.top = y * -2 + 'px'

            /**
             遮罩层移动距离        遮罩层
            ------------   =  ------------
            背景图片移动距离      放大镜

            背景图片移动距离 =  遮罩层移动距离*放大镜/遮罩层
            **/
            let moveX = x * this.bgGlass.offsetWidth / this.mask.offsetWidth
            let moveY = y * this.bgGlass.offsetHeight / this.mask.offsetHeight

            this.bgPic.style.left = -moveX + 'px'
            this.bgPic.style.top = -moveY + 'px'
        }
    }
    onTabGlass() {
        let showList = this.showList
        let smallPicELe = this.showList.children
        // 设置第一个小图为默认选中状态
        smallPicELe[0].setAttribute('class', 'pitchOn')
        // 委托事件，移入时换大图
        showList.addEventListener('mouseover', (e) => {
            // 获取当前事件对象
            e = e || window.event
            let target = e.target || e.srcElement
            if (target.getAttribute('class') == 'smallPic') {
                // 清除默认的选中效果
                for (let i = 0; i < smallPicELe.length; i++) {
                    // 循环将每个li的边框样式都清掉
                    smallPicELe[i].removeAttribute('class')
                }
                // Glass1.clearPitchOn()
                // 给选中的小图的div添加边框
                target.parentElement.setAttribute('class', 'pitchOn')
                // 获取到选择的图片的地址
                let picAddress = target.getAttribute('src')
                // 将对应的图片添加到大图
                let showBoxEle = this.showBox
                showBoxEle.firstElementChild.setAttribute('src', picAddress)
                // 将对应的图片换到放大镜大图
                let glassPic = this.bgPic
                glassPic.setAttribute('src', picAddress)
            }
        })
    }
    // 购买数量加减功能
    addshopNum() {
        // 点击+号数量加
        $('input[name="plus"]').on('click', function () {
            let num = $('input[name="amount"]').val()
            num++
            $('input[name="amount"]').val(num)
            // 判断数量将‘-’号是否禁用
            if ($('input[name="amount"]').val() >= 2) {
                $('input[name="minus"]').removeAttr('disabled')
            }
        })
        //点击-号数量减
        $('input[name="minus"]').on('click', function () {
            // 判断数量将‘-’号是否禁用
            let num = $('input[name="amount"]').val()
            num--
            $('input[name="amount"]').val(num)
            if ($('input[name="amount"]').val() <= 1) {
                $('input[name="minus"]').attr('disabled', 'disabled')
            }
        })
    }
    // 加入购物车
    addshopList(data) {
        console.log(data)
        // 获取产品的信息
        let shopObj
        let addToShoppingCartBtn = this.addToShoppingCartBtnEle
        // 设置点击加入购物车的点击事件
        $('#addCart-btn').on('click', function () {
            let carsList = {
                id: data.detail.id,
                image: data.detail.image,
                title: data.detail.title,
                originPrice: data.detail.originPrice,
                price: data.detail.price,
                singlePrice: '',
                state: false
            }
            // 将购物车的数据取出
            let carsStr = localStorage.getItem("CARSSHOPLIST")
            let cars = JSON.parse(carsStr) || []
            // 如果找到相同的id，就返回结果
            let newProduct = cars.find((item) => {
                return item.id == carsList.id
            })
            // 如果存在，新的数量就 = 本次数量+原来购物车的数量
            if (newProduct) {
                let productNum = $('input[name="amount"]').val()
                newProduct.num = Number(productNum) + Number(newProduct.num)
            } else {
                // 如果不存在，数量就为本次数量，并将这条数据push到购物车
                carsList.num = Number($('input[name="amount"]').val())
                cars.push(carsList)
            }
            // alert('添加商品成功')
            // 将数据转为JSON字符串然后存储
            localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        })
        $('#goBuy-btn').on('click', function () {
            alert('购买成功')
        })
    }
}